<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-09 11:42:09
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-04-10 11:26:00
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\pageModel\components\dataConfigModel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dataConfigModel">
    <el-dialog title="数据转换配置" :visible.sync="dataConfigOpen" width="70%" :before-close="dataConfigClose">
      <div v-loading="loading">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="数据转换方式">
            <el-select v-model="form.type" :popper-append-to-body="false" popper-class="selectClass" style="width: 100%"
              disabled>
              <el-option v-for="item in dict.type.pt_app_page_component_type" :key="item.id" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型" v-if="form.type === 'input-date' || form.type === 'input-date-range'
            ">
            <el-radio-group v-model="form.datQ">
              <el-radio label="date">日</el-radio>
              <el-radio label="month">月</el-radio>
              <el-radio label="year">年</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="日期时间格式化" v-if="(form.type === 'input-date' ||
            form.type === 'input-date-range') &&
            form.datQ === 'date'
            ">
            <el-select v-model="form.dateTypeFormat" :popper-append-to-body="false" popper-class="selectClass"
              style="width: 100%">
              <el-option v-for="item in dict.type.pt_app_page_date_type" :key="item.id" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="数据字典" v-if="form.type === 'dic'">
            <div @click="handleOpenDictList">
              <el-input v-model="form.dict" placeholder="请选择数据字典" readonly></el-input>
            </div>
          </el-form-item>
          <el-form-item label="接口" v-if="form.type === 'custom'">
            <el-select v-model="form.customParams" filterable value-key="id" popper-class="selectClass"
              style="width: 100%">
              <el-option v-for="(item, idx) in data" :key="idx" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否多选" v-if="form.type === 'dept' || form.type === 'user' || form.type === 'dic' || form.type === 'custom'">
            <el-radio-group v-model="form.multiple">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他配置" v-if="form.type === 'dept' || form.type === 'user'">
            <el-radio-group v-model="form.customConfig.deptConfig" @input="handleDeptConfig">
              <el-radio label="2">根节点为当前组织</el-radio>
              <el-radio label="5">根节点为固定组织</el-radio>
              <el-radio label="1">根节点为当前部门</el-radio>
              <el-radio label="3">自定义根节点</el-radio>
              <el-radio label="6" v-if="form.type === 'dept'">只显示组织</el-radio>
              <el-radio label="0">全部</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="(form.type === 'dept' || form.type === 'user') && (form.customConfig.deptConfig === '3' || form.customConfig.deptConfig === '5')">
            <div style="max-height:500px;overflow-y:auto">
              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id"
                default-expand-all highlight-current show-checkbox
                :default-checked-keys="form.customConfig.deptConfigCustom" @check="check"
                :check-strictly="form.customConfig.deptConfig === '5'" />
            </div>
          </el-form-item>

          <!-- <el-form-item label="操作" v-if="form.type === 'dic'">
            <codeEdit v-model="form.js" mode="javascript" theme="darcula"></codeEdit>
          </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataConfigClose">取 消</el-button>
        <el-button type="primary" @click="handleDataConfigSum(form)">确 定</el-button>
      </span>
    </el-dialog>
    <dictList v-if="dictListOpen" :open="dictListOpen" :beforeClose="() => (dictListOpen = false)" :appId="appId"
      :handleDictSure="handleDictSure" />
  </div>
</template>

<script>
import dictList from "./dictList.vue";
import codeEdit from "@/components/codeEdit";
import { list } from "@/api/system/customInterface";
import { deptTreeSelect, orgList } from "@/api/system/user.js";
export default {
  name: "HyUiDataConfigModel",
  components: {
    dictList,
    codeEdit,
  },
  dicts: ["pt_app_page_date_type", "pt_app_page_component_type"],
  props: {
    dataConfigOpen: {
      type: Boolean,
      default: false,
    },
    dataConfigClose: {
      type: Function,
      default: () => { },
    },
    rowData: {
      type: Object,
      default: () => { },
    },
    appId: {
      type: String,
      default: "",
    },
    handleDataConfigSum: {
      type: Function,
      default: () => { },
    },
  },
  data() {
    return {
      form: {
        multiple: "NO",
        datQ: "date",
        customConfig: undefined
      },
      dictListOpen: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      loading: false,
      deptOptions: []
    };
  },

  async mounted() {
    this.form.type = this.rowData.componentType;

    if (
      this.form.type === "input-date" ||
      this.form.type === "input-date-range"
    ) {
      this.form = {
        ...this.form,
        dateTypeFormat: this.rowData.formatQ,
        datQ: this.rowData.datQ ? this.rowData.datQ : "date",
      };
    }
    if (this.form.type === "dic") {
      this.form = {
        ...this.form,
        dict: this.rowData.formatNameQ,
        dictObj: { dictType: this.rowData.formatQ, activeName: this.rowData.formatTypeQ },
        multiple: this.rowData.multiple ? this.rowData.multiple : "NO",
      };
    }
    if (this.form.type === "dept" || this.form.type === "user") {
      this.form = {
        ...this.form,
        multiple: this.rowData.multiple ? this.rowData.multiple : "NO",
      };
      if (this.rowData.customConfig) {
        this.form.customConfig = JSON.parse(this.rowData.customConfig)
        if (this.form.customConfig.deptConfig === '3' || this.form.customConfig.deptConfig === '5') {
          await this.getDeptTree()
        }
      } else {
        this.form.customConfig = {
          deptConfig: '0',
          deptConfigCustom: [],
          deptConfigCustomHalf: [],
        }
      }
    }
    if (this.form.type === "custom") {
      const res = await list({ pageNum: 1, pageSize: 999 });
      if (res.code === 200) {
        this.data = res.rows;
      }
      this.form = {
        ...this.form,
        customParams: JSON.parse(this.rowData.formatQ) || {},
        multiple: this.rowData.multiple ? this.rowData.multiple : "NO",
      };
    }
  },

  methods: {
    handleOpenDictList() {
      this.dictListOpen = true;
    },
    handleDictSure(value, activeName) {
      if (!value) return this.$message.error("请选择数据字典");
      this.form.dictObj = { ...value, activeName };
      this.form.dict = value.dictName;
      this.dictListOpen = false;
    },
    async getDeptTree() {
      this.loading = true
      if (this.form.customConfig.deptConfig === '5') {
        const response = await orgList()
        this.deptOptions = response.data;
      }
      if (this.form.customConfig.deptConfig === '3') {
        const response = await deptTreeSelect()
        this.deptOptions = response.data;
      }
      this.loading = false
    },
    check(val, valSource) {
      if (this.form.customConfig.deptConfig === '3') {
        this.form.customConfig.deptConfigCustom = valSource.checkedKeys
        this.form.customConfig.deptConfigCustomHalf = valSource.halfCheckedKeys
      }
      if (this.form.customConfig.deptConfig === '5') {
        this.$refs.tree.setCheckedKeys([val.id])
        this.form.customConfig.deptConfigCustom = [val.id]
        this.form.customConfig.deptConfigCustomHalf = []
      }

    },
    handleDeptConfig(val) {
      this.form.customConfig = {
        deptConfigCustom: [],
        deptConfigCustomHalf: [],
        deptConfig: val

      }
      if (val === '3' || val === '5') {
        this.getDeptTree()
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dataConfigModel {}
</style>